<template>
    <el-menu
      class="side-menu"
      :default-active="activeMenu"
      router
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="/appointments">
        <el-icon><calendar /></el-icon>
        <span>预约信息</span>
      </el-menu-item>
      
      <el-menu-item index="/ai-chat">
        <el-icon><comment /></el-icon>
        <span>AI答疑</span>
      </el-menu-item>
      
      <el-menu-item index="/search-cases">
        <el-icon><search /></el-icon>
        <span>搜索病例</span>
      </el-menu-item>
      
      <el-menu-item index="/patient-info">
        <el-icon><user /></el-icon>
        <span>患者信息</span>
      </el-menu-item>
      
      <el-menu-item index="/case-statistics">
        <el-icon><data-line /></el-icon>
        <span>病例统计</span>
      </el-menu-item>
      
      <el-menu-item index="/profile">
        <el-icon><setting /></el-icon>
        <span>个人中心</span>
      </el-menu-item>
    </el-menu>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import {
    Calendar,
    Comment,
    Search,
    User,
    DataLine,
    Setting
  } from '@element-plus/icons-vue'
  
  const route = useRoute()
  const activeMenu = ref('')
  
  watch(() => route.path, (newPath) => {
    activeMenu.value = newPath
  }, { immediate: true })
  </script>
  
  <style scoped lang="scss">
  .side-menu {
    height: 100%;
    border-right: none;
    /* 新增以下样式移除滚动条 */
    overflow: hidden;
    
    /* 确保菜单内容不会导致滚动条出现 */
    :deep(.el-menu) {
      overflow: hidden;
      height: 100%;
      
      /* 确保菜单项不会超出容器 */
      display: flex;
      flex-direction: column;
    }
  
    .el-menu-item {
      height: 50px;
      line-height: 50px;
      margin: 4px 0;
      flex-shrink: 0; /* 防止菜单项被压缩 */
      
      &:hover {
        background-color: rgba(255, 255, 255, 0.1) !important;
      }
      
      &.is-active {
        background-color: rgba(255, 208, 75, 0.2) !important;
      }
      
      .el-icon {
        font-size: 18px;
        margin-right: 8px;
      }
    }
  }
  </style>